<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            html, body {
                height: 100%;
            }

            body {
                font-family: sans-serif;
                font-size: 1rem;
                margin: 0;
                display: grid;
                grid-template-areas: "nav nav" "items details";
                grid-template-columns: 1fr 400px;
                grid-template-rows: auto 1fr;
                min-height: 0;
            }

            main {
              grid-area: items;
              min-width: 0;
              min-height: 0;
              overflow-y: auto;
              padding: 8px;
            }

            main section h2 {
                margin: 2px 14px;
                font-size: 1rem;
            }

            aside {
              grid-area: details;
              padding: 8px;
            }

            aside h3 {
              word-wrap: anywhere;
            }

            aside p {
                margin: 2px 0;
            }

            aside .values li span {
              word-wrap: ;
              word-wrap: anywhere;
              padding: 4px;
            }

            aside .values {
              list-style: none;
              padding: 0;
              border: 1px solid lightgray;
            }

            aside .values span.key {
              width: 30%;
              display: block;
            }

            aside .values span.value {
              width: 70%;
              display: block;
              white-space: pre-wrap;
            }

            aside .values li {
              display: flex;
            }

            aside .values li:not(:first-child) {
              border-top: 1px solid lightgray;
            }

            nav {
              grid-area: nav;
            }

            .timeline li:not(.expanded) > ol {
                display: none;
            }

            .timeline li > div {
                display: flex;
            }

            .timeline .toggleExpanded {
                border: none;
                background: none;
                width: 24px;
                height: 24px;
                margin-right: 4px;
                cursor: pointer;
            }

            .timeline .toggleExpanded:before {
                content: "▶";
            }

            .timeline li.expanded > div > .toggleExpanded:before {
                content: "▼";
            }

            .timeline ol {
                list-style: none;
                padding: 0 0 0 20px;
                margin: 0;
            }

            .timeline .item {
                --hue: 100deg;
                --brightness: 80%;
                background-color: hsl(var(--hue), 60%, var(--brightness));
                border: 1px solid hsl(var(--hue), 60%, calc(var(--brightness) - 40%));
                border-radius: 4px;
                padding: 2px;
                display: flex;
                margin: 1px;
                flex: 1;
                min-width: 0;
                color: inherit;
                text-decoration: none;
            }


            .timeline .item:not(.has-children) {
                margin-left: calc(24px + 4px + 1px);
            }

            .timeline .item .caption {
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                flex: 1;
            }

            .timeline .item.level-3 {
                --brightness: 90%;
            }

            .timeline .item.level-2 {
                --brightness: 95%;
            }

            .timeline .item.level-5 {
                --brightness: 80%;
            }
            
            .timeline .item.level-6, .timeline .item.level-7 {
                --hue: 0deg !important;
            }

            .timeline .item.level-7 {
                --brightness: 50%;
                color: white;
            }

            .timeline .item.type-network {
                --hue: 30deg;
            }

            .timeline .item.type-navigation {
                --hue: 200deg;
            }

            .timeline .item.selected {
                background-color: Highlight;
                border-color: Highlight;
                color: HighlightText;
            }

            .timeline .item.highlighted {
                background-color: fuchsia;
                color: white;
            }

            .hidden {
                display: none;
            }

            #highlight {
                width: 300px;
            }

            nav form {
                display: inline;
            }
        </style>
    </head>
    <body>
        <nav>
            <button id="openFile">Open log file</button>
            <button id="collapseAll">Collapse all</button>
            <button id="hideCollapsed">Hide collapsed root items</button>
            <button id="hideHighlightedSiblings" title="Hide collapsed siblings of highlighted">Hide non-highlighted</button>
            <button id="showAll">Show all</button>
            <form id="highlightForm">
                <input type="text" id="highlight" name="highlight" placeholder="Highlight a search term" autocomplete="on">
                <output id="highlightMatches"></output>
            </form>
        </nav>
        <main></main>
        <aside></aside>
        <script type="module" src="main.js"></script>
    </body>
</html>
